import React, { createContext, useContext, useEffect, useState } from "react";



const CntCtx = createContext()

function Child1() {
  let parentCnt = useContext(CntCtx)
  console.log('child2 ')
  return (
    <div>
      child1 {parentCnt}
    </div>
  )
}

// function Child2() {
//   let parentCnt = useContext(CntCtx)
//   return (
//     <div>
//       child2 
//       {parentCnt}
//     </div>
//   )
// }

export default function ContextExample() {
  const [ cnt, setCnt ] = useState(0)
 
  // setTimeout(()=>{
  //   setCnt(cnt+1000)
  // },2000)
   
  console.log(`页面重新绘制 ${cnt}`)


  return (
    <div>
      hello world

      <button onClick={()=> setCnt(cnt+1)} >
       add </button>
      <CntCtx.Provider value={cnt}>
        <Child1 />

      </CntCtx.Provider>
    </div>
  )
}